/** @author: duanhaijiao  @date 2022/7/6--10:50 **/

/* name: "fileDownLoad" */
<template>
    <div class="fileDownLoad">

        <div class="fileDownLoad-list">
            <div class="fileDownLoad-item flex flex-align-center flex-space-between" v-for="item in fileList" :key="item.id" :title="item.title">
                <div class="fileDownLoad-item-name flex flex-align-center">
                    <i class="fileDownLoad-item-icon" v-if="getPostfix(item.file) == 'zip'">
                        <img class="img" src="@/assets/imgs/common/file-icon.png" :alt="item.name">
                    </i>
                    <i class="fileShow-item-icon" v-if="getPostfix(item.file) == 'docx'">
                        <img class="img" src="@/assets/imgs/common/docx.png" :alt="item.title">
                    </i>
                    <i class="fileShow-item-icon" v-if="getPostfix(item.file) == 'pdf'">
                        <img class="img" src="@/assets/imgs/common/pdf.png" :alt="item.title">
                    </i>
                    <i class="fileShow-item-icon" v-if="getPostfix(item.file) == 'xls'">
                        <img class="img" src="@/assets/imgs/common/xls.png" :alt="item.title">
                    </i>
                    <div>
                        <p class="bold">{{item.title}}</p>
                        <span class="fileDownLoad-item-size">{{item.createtime}}</span>
                    </div>
                </div>

                <div class="flex flex-align-center">
                    <div v-if="getPostfix(item.file) == 'pdf'" class="fileDownLoad-item-btn pointer" style="margin-right: 10px" @click="showFile(item.file)">
                        <i class="el-icon-zoom-in"></i>
                        <p>
                            预览
                        </p>
                    </div>
                    <div class="fileDownLoad-item-btn pointer" @click="downloadEvt($store.state.baseUrl + item.file,item.title)">
                        <i class="el-icon-download"></i>
                        <p>
                            下载
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import { home } from '@/assets/api/api.js'
    export default {
        name: "fileDownLoad",
        props:{
            pageId:''
        },
        components:{
        },
        computed:{

        },
        data() {
            return {
                fileList:[
                    {
                        id:1,
                        title:'pdf',
                        file:'@/assets/data/1111.pdf'
                    }

                ]
            }
        },
        watch:{
            pageId:function(value){
                this.getData()
            },
        },
        activated() {

        },
        mounted() {
            this.getData()
        },
        methods: {
            getPostfix(file) {
                let infoArr = file.split('.')
                return infoArr[infoArr.length-1] || 'zip'
            },
            showFile(file){
                let postfix = file.split('.')[1]
                if(postfix == 'pdf'){
                    window.open(this.$store.state.baseUrl + file)
                }else{
                    window.open('https://view.officeapps.live.com/op/embed.aspx?src=' +this.$store.state.baseUrl + file)
                }
            },
            getData(){
                this.$http(home.catelist,{
                    cate_id:this.pageId
                }).then((res)=>{
                    this.fileList = res.data.article
                })
            },
            downloadEvt(url, fileName) {
                var link = document.createElement('a');
                link.href = url;
                link.download = fileName;
                link.click();
            }
        }
    };
</script>

<style lang="scss">
    .fileDownLoad-list{
        .fileDownLoad-item{
            padding: 4px 30px;
            background: #F7F8FB;
            border: 1px solid #EDEDED;
            margin: 10px;
            .fileDownLoad-item-icon{
                width: 16px;
                margin-right: 20px;
            }
            .fileShow-item-icon{
                width: 30px;
                margin-right: 20px;
            }
            .fileDownLoad-item-size{
                color: #ccc;
                display: block;
                padding-top: 4px;
            }
            .fileDownLoad-item-btn{
                display: flex;
                flex-direction:column;
                justify-content: center;
                align-items: center;
                background: #fff;
                border: 1px solid #E6E6E6;
                width: 40px;
                height: 40px;
            }
        }
    }

</style>
